<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>买房</title>
    <link href="/myhouse/static/web/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/myhouse/static/web/js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <!--menu-->
    <script src="/myhouse/static/web/js/scripts.js"></script>
    <link href="/myhouse/static/web/css/styles.css" rel="stylesheet">
    <!--//menu-->
    <!--theme-style-->
    <link href="/myhouse/static/web/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Real Home Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

</head>
<style>
    .mydiv p{
        font-size: 0.8em;
        display: block;
        color: #A3A3A3;
        margin: 0 0 0.4em;
    }
    .mydiv span{
        display: block;
        width:40px;
        height: 40px;
        color: #fff;
        font-size: 0.8em;
        text-align: center;
        line-height: 3.3em;
    }  }
    .mydiv4 strong {
        font-size: 1em;
        display: block;
        color: #000;
    }
    .mydiv4 small {
        font-size: 0.7em;
        color: #A3A3A3;
    }
    #bydiv{
        float: left;
        margin-left: 50px;

    }
</style>
<style>
    .right-side .more .spantext{
        color: #27DA93;
    }
    .right-side .more .spantext:hover{
        color: white;
    }
</style>
<body>
<!--header-->
<script type="text/javascript">
    $(function() {
        var menu_ul = $('.menu > li > ul'),
            menu_a  = $('.menu > li > a');
        menu_ul.hide();
        menu_a.click(function(e) {
            e.preventDefault();
            if(!$(this).hasClass('active')) {
                menu_a.removeClass('active');
                menu_ul.filter(':visible').slideUp('normal');
                $(this).addClass('active').next().stop(true,true).slideDown('normal');
            } else {
                $(this).removeClass('active');
                $(this).next().stop(true,true).slideUp('normal');
            }
        });

    });
</script>
<jsp:include page="/inc/head.jsp"></jsp:include>
<!--//-->
<div class=" banner-buying">
    <div class=" container">
        <h3><span>MY</span>house</h3>
        <!---->
        <jsp:include page="/inc/menu.jsp"></jsp:include>
        <div class="clearfix"> </div>
        <!--initiate accordion-->
        <script type="text/javascript">
            $(function() {
                var menu_ul = $('.menu > li > ul'),
                    menu_a  = $('.menu > li > a');
                menu_ul.hide();
                menu_a.click(function(e) {
                    e.preventDefault();
                    if(!$(this).hasClass('active')) {
                        menu_a.removeClass('active');
                        menu_ul.filter(':visible').slideUp('normal');
                        $(this).addClass('active').next().stop(true,true).slideDown('normal');
                    } else {
                        $(this).removeClass('active');
                        $(this).next().stop(true,true).slideUp('normal');
                    }
                });

            });
        </script>

    </div>
</div>

<!--//header-->
<div class="container">
    <form method="get" action="/myhouse/web/buySingle" id="myform">
        <!--price-->
        <div class="price">
            <div class="price-grid">
                <input type="hidden" name="pon" >
                <div class="col-sm-4 price-top">
                    <h4>区县</h4>
                    <select class="in-drop" id="city" name="city">
                        <option>选择区县</option>
                        <c:forEach items="${requestScope.list}" var="list">
                            <option>${list.cityName}</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="col-sm-4 price-top" >
                    <h4>类别</h4>
                    <select class="in-drop" id="type" name="type">
                        <option>选择类别</option>
                        <c:forEach items="${requestScope.typelist}" var="typelist">
                            <option>${typelist.typeName}</option>
                        </c:forEach>

                    </select>
                </div>
                <div class="col-sm-4 price-top">
                    <h4>房间</h4>
                    <select class="in-drop" name="room" id="room">
                        <option>卧室数量</option>
                        <c:forEach items="${requestScope.roomlist}" var="roomlist">
                            <option>${roomlist.roomNum}</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="clearfix"> </div>
            </div>
            <input type="submit" value="搜索" style="margin-left: 500px" style="margin-bottom: -50px">
        </div>
    </form>

    <!---->
    <script src="/myhouse/static/web/js/jquery.min.js"></script>

    <script>
        $(function (){
            $("#myform").submit(nnd)

        })
        function nnd (){
            let citys =  $("#city").val();
            let type =  $("#type").val();
            let romms =  $("#room").val();

            if(citys == "选择区县" && type == "选择类别" && romms == "卧室数量"){
                return false;
            }else {
                return true;
            }

        }
    </script>
    <div class="top-grid">
        <h3>热门区域</h3>
        <div class="grid-at">
            <div class="col-md-3 grid-city">
                <a href="http://localhost:8080/myhouse/web/buySingle?pon=&city=%E5%B8%82%E5%8D%97%E5%8C%BA&type=%E9%80%89%E6%8B%A9%E7%B1%BB%E5%88%AB&room=%E5%8D%A7%E5%AE%A4%E6%95%B0%E9%87%8F">
                <div class="grid-lo">
                    <figure class="effect-layla">
                        <img class=" img-responsive" src="/myhouse/static/web/images/ce.jpg" alt="img06">
                        <figcaption>
                            <h4>市南区</h4>
                        </figcaption>
                    </figure>
                </div>
                </a>
            </div>
            <div class="col-md-3 grid-city">
                <a href="http://localhost:8080/myhouse/web/buySingle?pon=&city=%E5%B8%82%E5%8C%97%E5%8C%BA&type=%E9%80%89%E6%8B%A9%E7%B1%BB%E5%88%AB&room=%E5%8D%A7%E5%AE%A4%E6%95%B0%E9%87%8F">
                <div class="grid-lo">
                    <figure class="effect-layla">
                        <img class=" img-responsive" src="/myhouse/static/web/images/ce1.jpg" alt="img06">
                        <figcaption>
                            <h4>市北区</h4>
                        </figcaption>
                    </figure>
                </div>
                </a>
            </div>
            <div class="col-md-6 grid-city grid-city1">
                <div class="grid-me">
                    <a href="http://localhost:8080/myhouse/web/buySingle?pon=&city=%E6%9D%8E%E6%B2%A7%E5%8C%BA&type=%E9%80%89%E6%8B%A9%E7%B1%BB%E5%88%AB&room=%E5%8D%A7%E5%AE%A4%E6%95%B0%E9%87%8F">
                    <div class="col-md-8 grid-lo1">
                        <div class=" grid-lo">
                            <figure class="effect-layla">
                                <img class=" img-responsive" src="/myhouse/static/web/images/ce2.jpg" alt="img06">
                                <figcaption>
                                    <h4 class="effect1">李沧区</h4>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                    </a>
                    <div class="col-md-4 grid-lo2">
                        <a href="http://localhost:8080/myhouse/web/buySingle?pon=&city=%E5%B4%82%E5%B1%B1%E5%8C%BA&type=%E9%80%89%E6%8B%A9%E7%B1%BB%E5%88%AB&room=%E5%8D%A7%E5%AE%A4%E6%95%B0%E9%87%8F">
                        <div class=" grid-lo">
                            <figure class="effect-layla">
                                <img class=" img-responsive" src="/myhouse/static/web/images/ce3.jpg" alt="img06">
                                <figcaption>
                                    <h4 class="effect2">崂山区</h4>
                                </figcaption>
                            </figure>
                        </div>
                        </a>
                    </div>
                    <div class="clearfix"> </div>
                </div>
                <div class="grid-me">
                    <div class="col-md-6 grid-lo3">
                        <a href="http://localhost:8080/myhouse/web/buySingle?pon=&city=%E5%9F%8E%E9%98%B3%E5%8C%BA&type=%E9%80%89%E6%8B%A9%E7%B1%BB%E5%88%AB&room=%E5%8D%A7%E5%AE%A4%E6%95%B0%E9%87%8F">
                        <div class=" grid-lo">
                            <figure class="effect-layla">
                                <img class="img-responsive" src="/myhouse/static/web/images/ce4.jpg" alt="img06">
                                <figcaption>
                                    <h4 class="effect3">城阳区</h4>

                                </figcaption>
                            </figure>
                        </div>
                        </a>
                    </div>
                    <div class="col-md-6 grid-lo4">
                        <a href="http://localhost:8080/myhouse/web/buySingle?pon=&city=%E9%BB%84%E5%B2%9B%E5%8C%BA&type=%E9%80%89%E6%8B%A9%E7%B1%BB%E5%88%AB&room=%E5%8D%A7%E5%AE%A4%E6%95%B0%E9%87%8F">
                        <div class=" grid-lo">
                            <figure class="effect-layla">
                                <img class="img-responsive" src="/myhouse/static/web/images/ce5.jpg" alt="img06">
                                <figcaption>
                                    <h4 class="effect3">黄岛区</h4>
                                </figcaption>
                            </figure>
                        </div>
                        </a>
                    </div>
                    <div class="clearfix"> </div>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>

    </div>
    <div class="future">
        <c:if test="${empty requestScope.houseList}">
            <%--  为空提示语 --%>
            <span style="font-size: 50px; position: relative;left: 450px;top: 50px;">暂时没有售卖的房子</span>
        </c:if>
        <c:if test="${not empty requestScope.houseList}">
            <h3>售卖预览</h3>
            <div class="content-bottom-in">
                <ul id="flexiselDemo1">
                        <%--	<img class="img-responsive" src="/myhouse/static/uploadImages/202501081736314908264074570.webp" alt="" />			--%>
                    <c:forEach items="${requestScope.houseList}" var="house">
                        <li><div class="project-fur">
                            <div style="width: 226px; height: 180px ;">
                             <img style="width: 100%; height: 100%;" class="img-responsive" src="/myhouse/static/uploadImages/${house.showImg}" alt="" />
                            </div>
                                <div class="fur">
                                <div class="fur1">
                                    <span class="fur-money">面积:${house.area} ㎡</span>
                                    <h6 class="fur-name">类型:${house.type}</h6>
                                    <span>区县:${house.city}</span><br>
                                    <c:if test="${house.sold == false}">
                                    <span>已出售<span>
									</c:if>
									<c:if test="${house.sold == true}">
										<span>未出售</span>
									</c:if>
                                </div>
                                <div class="fur2">
                                    <span>房间数:${house.room}间</span>
                                    <br>
                                    <div class="right-side" style="display: flex; width: 600px">
                                        <a href="/myhouse/web/contact?id=${house.id}&&mediatorId=${house.mediatorId}" style="height: 30px;width: 70px;float: left" class="hvr-sweep-to-right more"><span class="spantext">联系我</span></a>
                                        <a href="/myhouse/web/single?id=${house.id}" style="height: 30px;width: 70px; margin-left: 40px; float: right" class="hvr-sweep-to-right more"><span class="spantext">查看详情</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </li>
                    </c:forEach>
                </ul>
                <script type="text/javascript">
                    $(window).load(function() {
                        $("#flexiselDemo1").flexisel({
                            visibleItems: 4,
                            animationSpeed: 1000,
                            autoPlay: true,
                            autoPlaySpeed: 3000,
                            pauseOnHover: true,
                            enableResponsiveBreakpoints: true,
                            responsiveBreakpoints: {
                                portrait: {
                                    changePoint:480,
                                    visibleItems: 1
                                },
                                landscape: {
                                    changePoint:640,
                                    visibleItems: 2
                                },
                                tablet: {
                                    changePoint:768,
                                    visibleItems: 3
                                }
                            }
                        });

                    });
                </script>
                <script type="text/javascript" src="/myhouse/static/web/js/jquery.flexisel.js"></script>
            </div>
        </c:if>
    </div>


</div>


</div>
</div>
</div>

<!--footer-->
<jsp:include page="/inc/footer.jsp"></jsp:include>
<!--//footer-->
</body>
</html>